<template>
  <div>
    
    <div class="video_detail">
      <div class="header">
      <van-sticky>
          <van-icon name="arrow-left" @click="goBack" style="position: absolute; left: 10px; top: 10px" />
          
          <div class="video-player">
            <video 
              ref="videoPlayer"
              :src="qq" 
              :controls="controls"
              @play="onPlay"
              @pause="onPause"
              @ended="onEnded"
            ></video>
          </div>
          <van-icon name="search" @click="goBack1" style="position: absolute; right: 10px; top: 10px" />
        </van-sticky>
      </div>
      <div class="content" v-for="item in list" :key="item._id">
        <div class="content_header">
          <div class="content_header_left">
            <div style="margin-right: 10px;"><img src="../../assets/1000.webp" alt="" /></div>
            <div>
              <p>综艺放映厅</p>
              <p style="color: #999; font-size: 12px">5小时前·来自广东</p>
            </div>
          </div>
          <div><button>关注</button></div>
        </div>
        <div style="margin-top: 10px;">
          <h3>{{ item.content }}</h3>
        </div>
        <div style="display: flex;margin-top: 10px;">
          <p>原创</p>
          <p style="margin-left: 20px">1111播放</p>
        </div>
        <div style="margin-top: 10px;">
          <p>子啊先武林外传品保全场,在线武林外传引爆全场</p>
        </div>
        <div class="vadio_d">
          <div>
            <van-icon name="share-o" />
            <p>分享</p>
          </div>
          <div>
            <van-icon name="star-o" />
            <p>收藏</p>
          </div>
          <div>
            <van-icon name="chat-o" />
            <p>{{ item.pinglun }}</p>
          </div>
          <div>
            <van-icon name="good-job-o" />
            <p>{{ item.dianzan }}</p>
          </div>
        </div>
      </div>
      <van-divider
        :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
      >
      </van-divider>
      <div v-for="item in list1" :key="item._id" class="footer">
            <div @click="dian(item)">
              <img src="../../assets/1000.webp" alt="">
          </div>
          <div style="margin-left: 20px;" @click="dian(item)">
             <p style="word-wrap: break-word; word-break: break-all; overflow: hidden">{{ item.content }} </p>
             <p>
              <p style="color: #999; font-size: 12px">5小时前·来自广东</p>
             </p>
          </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";
import axios from "axios";
import qq from "../../assets/1.mp4";

import { ref, onMounted, onUnmounted } from 'vue';
  
  // 假设视频源是来自组件属性或固定URL
  const props = defineProps({
    videoSrc: {
      type: String,
      required: true
    },
    controls: {
      type: Boolean,
      default: true
    }
  });
  
  const videoPlayer = ref(null);
  const playing = ref(false);
  

  
  // 事件处理函数
  const onPlay = () => {
    playing.value = true;
  };
  
  const onPause = () => {
    playing.value = false;
  };
  
  const onEnded = () => {
    playing.value = false;
  };
  


const route = useRoute();
const router = useRouter();
let list = ref([]);
let list1 = ref([]);
const dian = (item)=>{
  form.value._id = item._id;
  router.push({
    path: "/video/video_detail",
    query: { id: item._id },
  });
  getlist()
}

const goBack = ()=>{
  console.log(1);
  history.back()
}
const goBack1 = ()=>{
  router.push("/video/video_search")
}
let form = ref({
  _id: route.query.id,
});
let form1 = ref({
  page: 1,
  limit: 5,
  fenlei: "推荐",
});
const getlist = async () => {
  let data = await axios.post(
    "http://localhost:3000/video_search_list",
    form.value
  );
  list.value = data.data.video;
};

const getlist1 = async () => {
  let data = await axios.post("http://localhost:3000/video_list", form1.value);
  list1.value = data.data.video;
};
onMounted(() => {
  getlist();
  getlist1();
});
</script>

<style lang="less" scoped>
video{
    width: 100%;
      height: 100%;
      border-radius: 10px;
}
.footer{
  width: 90%;
  margin:auto;
  display: flex;
  justify-content: space-between;
  div{
    margin-top: 20px;
  }
  img{

    width: 100px;
    height: 80px;
  }
}

.header {
  width: 100%;
  height: 200px;
  img {
    width: 100%;
    height: 200px;
  }
}
.content {
  margin: auto;
  width: 90%;
  border-radius: 10px;
  margin-bottom: 20px;
  margin-top: 20px;
  .content_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    img {
      width: 40px;
      height: 40px;

      border-radius: 50%;
    }
    .content_header_left {
      width: 45%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      p {
        margin: 0;
      }
    }
  }
}
.vadio_d {
  display: flex;
  justify-content: space-around;
  align-items: center;
  div {
    display: flex;
    justify-content: space-around;
    align-items: center;
    p {
      margin: 5px;
    }
  }
}
</style>
